<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    String static_path = path + "/static/alpha";
    String x_admin_path = path + "/static/X-admin-2.3";
%>
<html>
<head>
    <title>迟到报表</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

    <!-- X-admin -->
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <script type="text/javascript" src="<%=x_admin_path%>/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="<%=x_admin_path%>/css/font.css">
    <link rel="stylesheet" href="<%=x_admin_path%>/css/xadmin.css">
    <script type="text/javascript" src="<%=x_admin_path%>/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=x_admin_path%>/js/xadmin.js"></script>
    <script src="<%=static_path%>/dist/js/adminlte.min.js"></script>
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- 文件头 -->
    <jsp:include page="/manage/inc/head"></jsp:include>

    <!-- 侧边栏 -->
    <jsp:include page="/manage/inc/sidebar"></jsp:include>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>迟到报表</h1>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>

        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <!-- Main content -->

                        <div class="invoice p-3 mb-3">

                            <div class="layui-row">
                                <div class="layui-form layui-col-md12 x-so " style="margin-left:130px; margin-top:4px; position:absolute;">
                                    <div class="layui-input-inline">
                                        <select class="valid" lay-search lay-filter="postTypeSelect">
                                            <option value="">是否特殊</option>
                                            <option value="2">否</option>
                                            <option value="1">是</option>
                                        </select>
                                    </div>
                                </div>

                                <xblock style="background-color:white;">
                                    <button class="layui-btn" onclick="insertPost()"><i class="layui-icon"></i>新增岗位</button>
                                    <span class="x-right" style="position:absolute; margin-left:60%;">
                                    <%--<button class="layui-btn" onclick="x_admin_show('岗位类别管理','<%=path%>/manage/department/post_management/postType')" style="background-color:white; color:black;">岗位类别管理</button>--%>
                                    <%--<button class="layui-btn" onclick="x_admin_show('添加用户','./order-add.html')" style="background-color:white; color:black;">岗位职级管理</button>--%>
                                </span>
                                    <span class="x-right" style="line-height:40px">共有数据：88 条</span>
                                </xblock>
                                <!-- Table row -->
                                <%--主要内容--%>
                                <div id="listdata"></div>
                                <%--主要内容--%>


                                <%--<div class="row">
                                    <div class="col-12 table-responsive" id="infoDiv">
                                        <table class="table table-striped &lt;%&ndash;layui-table&ndash;%&gt; layui-form">
                                            <thead>
                                            <tr>
                                                <th>员工工号</th>
                                                <th>员工姓名</th>
                                                <th>考勤时间</th>
                                                <th>迟到时间</th>
                                                <th>是否特殊</th>
                                                <th>备注</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <c:forEach items="${requestScope.late}" var="late">
                                                <tr>
                                                    <td>${late.user.jobNum}</td>
                                                    <td>${late.user.name}</td>
                                                    <td><fmt:formatDate value="${late.lateStartTime}" pattern="HH:mm:ss"/></td>
                                                    <td><fmt:formatDate value="${late.lateActualTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
                                                    <td ><input type="checkbox" lay-filter="isRemarks" value="${late.id} "  name="switch"  lay-text="是|否"   lay-skin="switch" ${late.except?'checked=""':0 }></td>
                                                    <td title="${late.remarks} " style="width: 400px;"><a id="updataRemarks">${empty late.remarks ? 'null':late.remarks} </a> </td>
                                                    <input type="hidden"  value="${late.id} " />
                                                </tr>
                                            </c:forEach>
                                            </tbody>
                                        </table>
                                    </div>
                                    <!-- /.col -->
                                    <div id="page" style="margin-left:30%;"></div>
                                </div>--%>


                            </div>
                            <!-- /.invoice -->
                        </div><!-- /.col -->
                    </div><!-- /.row -->
                </div><!-- /.container-fluid -->
                <!-- /.content -->
                <div class="page">
                    <div>
                        <a class="prev" href="">&lt;&lt;</a>
                        <a class="num" href="">1</a>
                        <span class="current">2</span>
                        <a class="num" href="">3</a>
                        <a class="num" href="">489</a>
                        <a class="next" href="">&gt;&gt;</a>
                    </div>
                </div>
            </div>
            <%--
            <!-- 底部包含 -->
                <jsp:include page="/manage/inc/foot"></jsp:include>
            &lt;%&ndash;&ndash;%&gt;--%>
    </div>

    <script>
        $("a[id=updataRemarks]").click(updataRemarks)

        function updataRemarks(){
            var name = $(this).html();
            var tx = $("<input type='text'>");
            tx.css("width",300);
            tx.val(name);
            $(this).parent().html(tx);

            tx.blur(function(){
                var newName = $(this).val();//文本框中新输入的数据
                var thx = tx.parent();
                var Id = thx.next().val();

                if(newName.length <= 15){
                    $.ajax({
                        url : "<%=path%>/manage/late_info/update_remarks",
                        type : "get",
                        async:false,
                        data : {
                            id : Id,
                            remarks : newName,
                        },
                        success : function(mes) {
                        }
                    });
                }
                else{
                    alert("备注不得多于十五字");
                }

                var nx = $("<a></a>");
                nx.html(newName);
                thx.html(nx);
                nx.click(updataRemarks);})//重新添加
        };

    </script>

    <%--是否特殊--%>
    <script>
        /*分页相关*/
        $(function(){

            initData();
            //给页码添加点击事件
            $("#listdata").on("click",".list-page a",function(){
                var pageNo=$(this).attr("page");
                initData(pageNo);
                return false;
            });

            //给搜索按钮添加点击事件
            /*$("#search").click(function(){
                initData(1);
            });*/
        });

        function initData(pageNo)
        {
            var data={pageNo:null,beginTime:null,endTime:null,name:null,id:null,"course.id":null,"course.school.id":null};

            if(pageNo==undefined)
            {
                pageNo=1;
            }
            data.pageNo=pageNo;

            var beginTime = $("#logmin").val();
            if(beginTime!="")
            {
                data.beginTime=beginTime;
            }
            $.get("<%=path%>/manage/late_info/list_data",
                data,
                function(listdata){
                    $("#listdata").html(listdata);
                });
        }
        /*分页相关*/

        var path = "<%=path%>";

        /* layui框架中switch 开关监听+ajax 数据更新 */
        //是否首页显示
        layui.use([ 'form' ], function() {
            form = layui.form;
            form.on('switch(isRemarks)', function(data){
                if(this.checked){

                    $.ajax({
                        url : path +"/manage/late_info/isSpecial",
                        type : "get",
                        data : {
                            id : $(this).val(),
                            except : true
                        },
                        success : function(mes) {
                        }
                    });
                    layer.msg('已在设为特殊', {
                        offset: '6px'
                    });
                }
                else{
                    $.ajax({
                        url : path +"/manage/late_info/isSpecial",
                        type : "get",
                        data : {
                            id : $(this).val(),
                            except : false
                        },
                        success : function(mes) {
                        }
                    });
                    layer.msg('取消特殊', {
                        offset: '6px'
                    });
                }
            });
        })
    </script>

</body>
</html>

